<template>
    <!-- 供应商选择下拉框 -->
    <el-select placeholder="请输入供应商" v-model="modelValue" style="width: 240px" @change="change">
        <!-- 供应商选项 -->
        <el-option v-for="item in vendorData" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
</template>

<script setup lang="ts">
import { ref, onMounted, defineModel } from 'vue'
import { vendorApi } from '@/api'

// 双向绑定的模型值，用于存储选中的供应商ID
const modelValue = defineModel("modelValue")
// 双向绑定的模型值，用于存储选中的供应商名称
const vendorName = defineModel("vendorName")
// 存储供应商数据的响应式变量
const vendorData = ref<any>([])

// 调用API获取供应商数据
const callApi = () => {
  vendorApi.select.call().then((res: any) => {
    // 在返回的数据前添加一个默认选项
    res = [{ id: 0, name: "请选择供应商" }].concat(res)
    vendorData.value = res
  })
}

// 当选择的供应商发生变化时触发
const change = (value: any) => {
  // 找到选中的供应商对象
  let selected = vendorData.value.filter((item: any) => {
    return item.id == value
  })
  // 更新选中的供应商名称
  vendorName.value = selected[0].name
}

// 组件挂载后调用API获取供应商数据
onMounted(() => {
  callApi()
})
</script>